<template>
  <div
    class="add-wrapper"
  >
    <div class="theme-bg-dark" v-if="showAddToHomeScreen">
      <div class="title">
        {{ $t('page.是否将该网站添加到桌面以便离线查看') }}
      </div>
      <div class="logo-wrapper">
<!--        <img src="@/assets/images/logo.png" alt="">-->
        <div class="logo-text">
          <img src="@/assets/images/logo.png" alt="">
          <div class="link">{{ link }}</div>
        </div>
      </div>
      <div class="button-wrapper">
        <div @click="handleCancel">{{ $t('page.取消') }}</div>
        <div @click="handleConfirm">{{ $t('page.确定') }}</div>
      </div>
    </div>

    <van-popup v-model="show">
      <div class="mflex items-end h-screen w-screen" @click="show = false">
        <div class="bg-dark p-16 w-full text-16">
          <div class="mflex items-center justify-center text-grey">
            {{ $t('page.点击下面的工具栏') }}
            <img class="w-32 ml-4" src="@/assets/images/addToHomeScreen/1.png" alt="">
          </div>
          <div class="flex items-center justify-center mt-4 text-grey">
            {{ $t('page.并选择') }}
            <img class="w-32 ml-4" src="@/assets/images/addToHomeScreen/1.png" alt="">
            {{ $t('page.“添加到主屏幕”') }}
          </div>
          <div class="mt-16 bg-1d1d1d rounded-12 overflow-hidden">
            <div class="mflex items-center justify-between h-51 px-16 border-b">
              <div>{{ $t('page.添加到阅读列表') }}</div>
              <img class="w-30" src="@/assets/images/addToHomeScreen/2.png" alt="">
            </div>
            <div class="mflex items-center justify-between h-51 px-16 border-b">
              <div>{{ $t('page.添加书签') }}</div>
              <img class="h-22" src="@/assets/images/addToHomeScreen/3.png" alt="">
            </div>
            <div class="mflex items-center justify-between h-51 px-16 border-b">
              <div>{{ $t('page.添加到个人收藏') }}</div>
              <img class="h-22" src="@/assets/images/addToHomeScreen/4.png" alt="">
            </div>
            <div class="mflex items-center justify-between h-51 px-16 border-b">
              <div>{{ $t('page.在页面上查找') }}</div>
              <img class="h-22" src="@/assets/images/addToHomeScreen/5.png" alt="">
            </div>
            <div class="mflex items-center justify-between h-51 px-16 bg-3a3a3a">
              <div>{{ $t('page.添加到主屏幕') }}</div>
              <img class="h-22" src="@/assets/images/addToHomeScreen/6.png" alt="">
            </div>
          </div>
          <div class="flex justify-center mt-16" @click="show = false">
            <img class="w-28" src="@/assets/images/addToHomeScreen/Frame.png" alt="">
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      link: '',
      show: false,
      count: 0,
      showAddToHomeScreen: false
    }
  },
  created() {
    this.link = location.origin

    setTimeout(() => {
      const flag = window.localStorage.getItem('miracle_count')

      if (!parseInt(flag) && this.isSafari()) {
        this.showAddToHomeScreen = true
      }
    }, 5 * 1000)
  },
  methods: {
    isSafari() {
      const ua = navigator.userAgent.toLowerCase();
      return ua.includes('safari') && !ua.includes('chrome');
    },
    handleCancel() {
      this.showAddToHomeScreen = false
      this.count++
      window.localStorage.setItem('miracle_count', this.count)
    },
    handleConfirm() {
      this.$nextTick(() => {
        this.count++
        this.showAddToHomeScreen = false

        this.show = true

        window.localStorage.setItem('miracle_count', this.count)
      })
    }
  }
}
</script>

<!--fixed w-full px-8 box-border left-0 bottom-58 z-1000-->
<style lang="less" scoped>
.add-wrapper {
  position: fixed;
  left: 0;
  bottom: 75px;
  z-index: 999;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;

  .logo-wrapper {
    display: flex;
    align-items: center;
    margin: 20px 0;

    img {
      flex-shrink: 0;
      width: 50px;
      margin-right: 10px;
      //border-radius: 8px;
    }

    font-size: 18px;

    .logo-text {
      flex: 1;
    }

    .link {
      width: 80%;
      margin-top: 4px;
      font-size: 14px;
      color: #ccc;
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 用省略号表示被截断的内容 */
    }
  }

  .theme-bg-dark {
    padding: 16px 20px;
    border-radius: 8px;
    background: #181c21;

    .title {
      font-size: 16px;
      text-align: center;
    }

    .button-wrapper {
      display: flex;
      align-items: center;
      margin-top: 12px;

      > div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        border-radius: 8px;
        background: #101116;
        font-size: 16px;

        &:first-child {
          margin-right: 15px;
        }

        &:last-child {
          background: #FFDD9A;
          color: #333;
        }
      }
    }
  }
}

.bg-dark {
  background: #141414;
}

.w-32 {
  width: 32px;
}

.w-30 {
  width: 30px;
}

.w-28 {
  width: 28px;
}

.p-16 {
  padding: 16px;
}

.text-16 {
  font-size: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.border-b {
  border-bottom: 0.5px solid #323232;
}

.h-51 {
  height: 51px;
}

.h-22 {
  height: 22px;
}

.bg-1d1d1d {
  background: #1d1d1d;
}

.bg-3a3a3a {
  background: #3a3a3a;
}

.px-16 {
  padding: 0 16px;
}

.rounded-12 {
  border-radius: 12px;
}

.overflow-hidden {
  overflow: hidden;
}
</style>
